<template>
    <div>
        <div class="grid-container">
            <div class="grid-item" v-for="user in info.users" :key="user.id">
                <a :href="user.html_url" target="_blank">
                    <img :src="user.avatar_url" alt="user_header">
                </a>
                <h3>{{ user.login }}</h3>
            </div>
        </div>
        <h1 v-show="info.isFirst">欢迎使用，请在搜索框中输入想要查询的Github用户名。</h1>
        <h1 v-show="info.isLoding">加载中...</h1>
        <h1 style="color: brown;"> {{ info.errMessage }} </h1>
    </div>
  
</template>

<script>
export default {
    name: 'ListComponent',
    data () {
        return {
            info: {
                users: [],
                isFirst: true,
                isLoding: false,
                errMessage: ''
            }
        }
    },
    methods: {
        // 传递users
        updateInfo(infoObj) {
            this.info = {... this.info, ... infoObj}
            console.log(this.info)
        },
    },
    mounted () {
        // 注册全局事件总线, 接受users列表
        this.$bus.$on('updateInfo', this.updateInfo)
    }
}
</script>

<style scoped>

h1 {
    text-align: center
}
img {
    transition: .2s ease-in-out;
    width: 50%;
    border-radius: 10%;
    margin: 4%;
}

.grid-container {
    transition: .2s ease-in-out;
    display: grid;
    /* 网格列间距 */
    /* grid-column-gap: 10%; */
    grid-row-gap: 5px;
    grid-column-gap: 5px;
    grid-template-columns: 30% 30% 30%;
    margin: auto;
    width: 95%;
    justify-content: center;
}

.grid-item:hover {
    transition: .2s ease-in-out;
    background-color: #e7e7e7dd;
}

.grid-item:hover img {
    transition: .2s ease-in-out;
    width: 60%;
}

.grid-item {
    border: 1px solid #cececee9;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
}

h3 {
    text-align: center;
}

a {
    display: flex;
    justify-content: center;
}
</style>